<template>
  <div class="temChangeTree">
    <div class="el-col el-col-6 temChangeTree" v-loading="loading">
      <div slot="header" class="clearfix tree-title">
        <span class="span-title">业务分类</span>
      </div>
      <div class="tree-detail">
        <div class="block">
          <el-tree
            :data="treeData"
            :props="defaultProps"
            @node-expand="expand"
            @node-collapse="collapse"
            @current-change="handleCurrentChange"
            :default-expanded-keys="defaultExpandedKeys"
            :highlight-current="true"
            node-key="id"
            class="nodes-tree"
            :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span :title="data.name" class="treeSize">{{ data.name }}</span>
            </span>
          </el-tree>
        </div>
      </div>
    </div>
    <div class="el-col el-col-18">
      <tpl-busi-template-mapping-list :tplBusiTypeId="selectNodeId" :tplBusiTypeName="selectNodeName"></tpl-busi-template-mapping-list>
    </div>
  </div>

</template>

<script>
  import '@/styles/newstyle.scss'
  import {
    treeSelectBusiType
  } from '@/api/templateManage/TplBusiType.js'
  import tplBusiTemplateMappingList from './components/tplBusiTemplateMappingList'
  // import tplBusiTypeView from './components/tplBusiTypeView'

  // const store = require('store')

  export default {
    name: 'tplBusiTemplateMappingCom',
    data() {
      return {
        loading: false,
        treeData: [],
        defaultExpandedKeys: [],
        defaultProps: {
          children: 'children',
          label: 'title'
        },
        selectNodeId: '',
        selectNodeName: ''
      }
    },
    props: ['asyncData'],
    created() {
      this.fetchData()
    },
    watch: {
      //
    },
    components: {
      //
      tplBusiTemplateMappingList
    },
    // 画面刚进入method
    beforeRouteEnter(to, from, next) {
      next(vm => {
        // 通过 `vm` 访问组件实例
        vm.fetchData()
      })
    },
    mounted() {
      // this.handleReset()
    },
    methods: {
      fetchData() {
        this.loading = true
        treeSelectBusiType({}).then(res => {
          this.treeData = res.data.data
          this.loading = false
          this.setDefaultExpandedKeys(res.data.data)
        }).catch((err) => {
          this.loading = false
          console.log(err)
        })
      },
      expand(data) {
        //
      },
      collapse() {
        //
      },
      setDefaultExpandedKeys(data) {
        //
        if (data && data.length > 0) {
          let keys = []
          data.forEach((item, index) => {
            keys.push(item.id)
          })
          this.defaultExpandedKeys = keys
        }
      },
      handleCurrentChange(data, node) {
        //
        this.selectNodeId = data.data_id
        this.selectNodeName = data.name
      }
    }
  }
</script>
<style scoped>
  .custom-tree-node{
    line-height: 40px;
  }
  .tree-title{
    font-size: 16px;
    padding:10px 10px 10px 20px;
    border-bottom: 1px solid#ccc;
  }
  .tree-detail{
    padding: 10px 0 80px 15px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }
  .custom-tree-node{
    line-height: 40px;
    display: flex;
  }
  .span-title{
    float: left;
    line-height: 16px;
    border-left:4px solid #000;
    padding-left: 10px;
    font-size: 16px;
    margin-top: 7px;
  }
</style>
